<template>
  <div class="app-container home">
    <div class="srceen-box">
      <div
        v-for="(item, index) in dataList"
        :key="index"
        v-hasPermi="[item.role]"
        class="srceen-item"
        @click="handleLink(item)"
      >
        <span>{{ item.name }}</span>
        <img :src="item.image" :alt="item.name" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      dataList: [
        {
          name: "成本大屏",
          path: "/srceen/cost",
          role: "srceen:page:cost",
          image: require("../assets/home/thumbnail1.png"),
        },
        {
          name: "品质大屏",
          path: "/srceen/quality",
          role: "srceen:page:quality",
          image: require("../assets/home/thumbnail2.png"),
        },
        {
          name: "车间-开料",
          path: "/srceen/workshop/cutting",
          role: "workshop:page:cutting",
          image: require("../assets/home/thumbnail3.png"),
        },
        {
          name: "车间-钻孔",
          path: "/srceen/workshop/drill",
          role: "workshop:page:drill",
          image: require("../assets/home/thumbnail4.png"),
        },
        {
          name: "车间-电镀",
          path: "/srceen/workshop/plating",
          role: "workshop:page:plating",
          image: require("../assets/home/thumbnail5.png"),
        },
        {
          name: "车间-线路",
          path: "/srceen/workshop/line",
          role: "workshop:page:line",
          image: require("../assets/home/thumbnail6.png"),
        },
        {
          name: "车间-线路检测",
          path: "/srceen/workshop/line-detection",
          role: "workshop:page:detection",
          image: require("../assets/home/thumbnail7.png"),
        },
        {
          name: "车间-防焊",
          path: "/srceen/workshop/soldermask",
          role: "workshop:page:soldermask",
          image: require("../assets/home/thumbnail8.png"),
        },
        {
          name: "车间-文字印刷",
          path: "/srceen/workshop/text",
          role: "workshop:page:text",
          image: require("../assets/home/thumbnail9.png"),
        },
        {
          name: "车间-成型",
          path: "/srceen/workshop/forming",
          role: "workshop:page:forming",
          image: require("../assets/home/thumbnail10.png"),
        },
        {
          name: "车间-电测",
          path: "/srceen/workshop/measurement",
          role: "workshop:page:measurement",
          image: require("../assets/home/thumbnail11.png"),
        },
        {
          name: "车间-终检",
          path: "/srceen/workshop/deadCheck",
          role: "workshop:page:inspection",
          image: require("../assets/home/thumbnail12.png"),
        },
        {
          name: "车间-包装",
          path: "/srceen/workshop/package",
          role: "workshop:page:package",
          image: require("../assets/home/thumbnail13.png"),
        },
        {
          name: "车间-喷锡",
          path: "/srceen/workshop/tin",
          role: "workshop:page:tin",
          image: require("../assets/home/thumbnail14.png"),
        },
        {
          name: "车间-化金",
          path: "/srceen/workshop/melt",
          role: "workshop:page:melt",
          image: require("../assets/home/thumbnail15.png"),
        },
        {
          name: "车间-物料品质",
          path: "/srceen/workshop/quality",
          role: "workshop:page:quality",
          image: require("../assets/home/thumbnail16.png"),
        },
        {
          name: "车间-全厂药水化验",
          path: "/srceen/workshop/potion",
          role: "workshop:page:potion",
          image: require("../assets/home/thumbnail17.png"),
        },
      ],
    };
  },
  methods: {
    // 跳转链接
    handleLink(item) {
      if (!item.path) return;
      window.open(item.path, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  background-color: #fff;
  width: 100%;
  min-height: 100vh;
  overflow-y: auto;
  .srceen-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    width: 100%;
    height: 100%;
    .srceen-item {
      display: flex;
      height: 203px;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      border-radius: 10px;
      position: relative;
      background-color: #0c2e5f;
      overflow: hidden;
      box-shadow: 5px 5px 5px rgba(12, 47, 95, 1);
      transition: all 0.3s ease-in-out;
      span {
        z-index: 1;
      }
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        transition: all 0.3s ease-in-out;
        opacity: 0.5;
      }
      &:hover {
        cursor: pointer;
        box-shadow: 5px 5px 5px rgba(12, 47, 91, 0.8);
        img {
          transform: scale(1.1);
        }
      }
    }
  }
}
</style>
